<template>
  <div>
    <t-menu :theme="theme" class="nav-menu">
      <template #logo>
        <div flex justify-center items-center text-xl gap-1 class="nav-logo" @click="goHome">
          <span mt-2px class="i-ri-at-fill" role="img" aria-hidden="true" />
          <span font-bold>日报小助手</span>
        </div>
      </template>
      <menu-content :nav-data="menu" />
    </t-menu>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { useRouter } from 'vue-router'

import type { MenuRoute } from '@renderer/types/interface'

import MenuContent from './MenuContent.vue'

defineProps({
  menu: {
    type: Array as PropType<MenuRoute[]>,
    default: () => []
  },
  showLogo: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  isFixed: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  layout: {
    type: String as PropType<string>,
    default: ''
  },
  headerHeight: {
    type: String as PropType<string>,
    default: '64px'
  },
  theme: {
    type: String as PropType<'light' | 'dark'>,
    default: 'light'
  },
  isCompact: {
    type: Boolean as PropType<boolean>,
    default: false
  }
})

const router = useRouter()

const goHome = () => {
  router.push('/report/report-git')
}
</script>

<style lang="scss">
.nav-menu {
  .t-menu__logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.nav-logo {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;

  margin-left: 0;
}
</style>
